<template>
  <el-dialog
      v-model="visible"
      title="用户详情"
      width="60%"
      :before-close="handleClose"
  >
    <el-skeleton :rows="5" animated v-if="loading" />
    <el-descriptions v-else :column="2" border>
      <!-- 基本信息 -->
      <el-descriptions-item label="用户ID">{{ detailData.id || '-' }}</el-descriptions-item>
      <el-descriptions-item label="微信OpenID">{{ detailData.wxOpenId || '-' }}</el-descriptions-item>
      <el-descriptions-item label="昵称">{{ detailData.nickname || '-' }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ formatGender(detailData.gender) }}</el-descriptions-item>

      <!-- 头像 -->
      <el-descriptions-item label="头像">
        <el-image
            v-if="detailData.avatarUrl"
            :src="detailData.avatarUrl"
            style="width: 50px; height: 50px"
            :preview-src-list="[detailData.avatarUrl]"
            preview-teleported
        />
        <span v-else>-</span>
      </el-descriptions-item>

      <!-- 联系信息 -->
      <el-descriptions-item label="手机号">{{ detailData.phone || '-' }}</el-descriptions-item>
      <el-descriptions-item label="最后登录IP">{{ detailData.lastLoginIp || '-' }}</el-descriptions-item>

      <!-- 时间信息 -->
      <el-descriptions-item label="最后登录时间">
        <div v-if="detailData.lastLoginTime">
          <div>{{ (detailData.lastLoginTime) }}</div>
          <el-tag size="small" type="info">
            {{ (detailData.lastLoginTime) }}
          </el-tag>
        </div>
        <span v-else>-</span>
      </el-descriptions-item>

      <!-- 状态信息 -->
      <el-descriptions-item label="押金状态">
        <el-tag :type="getDepositStatusType(detailData.depositStatus)">
          {{ formatDepositStatus(detailData.depositStatus) }}
        </el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="账号状态">
        <el-tag :type="detailData.status === 1 ? 'success' : 'danger'">
          {{ formatStatus(detailData.status) }}
        </el-tag>
      </el-descriptions-item>

      <!-- 系统信息 -->
      <el-descriptions-item label="创建信息">
        <div v-if="detailData.createTime">
          <div>{{ (detailData.createTime) }}</div>
          <div>创建人: {{ detailData.createBy || '系统' }}</div>
        </div>
        <span v-else>-</span>
      </el-descriptions-item>

      <el-descriptions-item label="更新信息">
        <div v-if="detailData.updateTime">
          <div>{{ (detailData.updateTime) }}</div>
          <div>更新人: {{ detailData.updateBy || '系统' }}</div>
        </div>
        <span v-else>-</span>
      </el-descriptions-item>

      <!-- 备注 -->
      <el-descriptions-item label="备注" :span="2">
        {{ detailData.remark || '无' }}
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { getUserInfo } from '@/api/vipUser/userInfo'

import {ElMessage} from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userId: {
    type: [Number, String],
    required: true
  }
})

const emit = defineEmits(['update:visible'])

const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const loading = ref(false)
const detailData = ref(initDetailData())

// 初始化详情数据
function initDetailData() {
  return {
    id: null,
    wxOpenId: null,
    nickname: null,
    gender: null,
    avatarUrl: null,
    phone: null,
    lastLoginIp: null,
    lastLoginTime: null,
    depositStatus: null,
    status: null,
    createTime: null,
    createBy: null,
    updateTime: null,
    updateBy: null,
    remark: null
  }
}

// 格式化方法
const formatGender = (gender) => {
  const map = { 0: '未知', 1: '男', 2: '女' }
  return gender !== null ? map[gender] || '未知' : '-'
}

const formatDepositStatus = (status) => {
  const map = { 0: '未缴纳', 1: '已缴纳', 2: '已退还' }
  return status !== null ? map[status] || '未知' : '-'
}

const getDepositStatusType = (status) => {
  const map = { 0: 'danger', 1: 'success', 2: 'info' }
  return map[status] || ''
}

const formatStatus = (status) => {
  return status === 1 ? '正常' : status === 0 ? '禁用' : '-'
}

// 获取详情数据
const fetchUserDetail = async () => {
  try {
    loading.value = true
    const res = await getUserInfo(props.userId)
    detailData.value = res.data
  } catch (error) {
    console.error('获取用户详情失败:', error)
    ElMessage.error('获取用户详情失败')
  } finally {
    loading.value = false
  }
}

// 关闭对话框
const handleClose = () => {
  visible.value = false
}

// 监听visible变化
watch(visible, (val) => {
  if (val) {
    fetchUserDetail()
  } else {
    detailData.value = initDetailData()
  }
})
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.el-image {
  vertical-align: middle;
}
.el-tag {
  margin-right: 5px;
}
</style>